<template>

  <div class="messagebox">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
      <el-form-item label="患者姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="患者卡号" prop="idnumber">
        <el-input v-model="ruleForm.idnumber"></el-input>
      </el-form-item>
      <el-form-item label="患者年龄" prop="age">
        <el-input v-model="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-col :span="11">
          <el-form-item prop="date">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
            </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" placeholder="">
            <el-option label="请选择" value=""></el-option>
            <el-option label="男" value="man"></el-option>
            <el-option label="女" value="women"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="证件号码" prop="zhengjia">
        <el-input v-model="ruleForm.zhengjia"></el-input>
      </el-form-item>
      <el-form-item label="接诊类型" prop="type">
        <el-input v-model="ruleForm.type"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="adress">
         <el-cascader
            v-model="ruleForm.adress"
            :options="options">
          </el-cascader>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="ruleForm.note"></el-input>
      </el-form-item>
      
    </el-form>
  </div>
</template>

<script>
import area from '../../../assets/area.json'
export default {
      data() {
        var checkPhon_unm = (rule, value, callback) => {
        if (value) {
          if (!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)) {
            callback(new Error("请输入正确的电话号码！"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
        var validateUsername = (rule, value, callback) => {
        if (value) {
          if (value.length<2||value.length>16) {
            callback(new Error("姓名不得小于2个或大于16个字符！"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
        var validatorAge = (rule, value, callback) => {
        if (value) {
          if (value<0||value>100) {
            callback(new Error("请输入正确的年龄格式"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      var validateIdNumber = (rule, value, callback) => {
        if (value) {
          if (!/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) {
            callback(new Error("请输入正确格式的证件号码！"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };

      return {
        options:area,//级联框
        ruleForm: {
          name: '',
          idnumber:'',
          age:'',
          date:'',
          sex:'',
          phone:'',
          zhengjia:'',
          type:'',
          note:'',


        },
        rules: {
          name: [
            { required: true, message: '请输入患者姓名', trigger: 'blur' },
            { validator: validateUsername, trigger: 'blur' }
          ],
          idnumber: [
            { required: false, message: '请输入患者卡号', trigger: 'blur' },
          ],
          age: [
            { required: true, message: '请输入患者年龄', trigger: 'blur' },
            { validator: validatorAge, trigger: 'blur' }
          ],
          date: [
            { type: 'date', required: false, message: '请选择日期', trigger: 'change' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          phone: [
            { validator: checkPhon_unm, trigger: "blur" },
          ],
          zhengjia: [
            { validator: validateIdNumber, trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请输入接诊类型', trigger: 'blur' },
            
          ],
        }
      }
    }
    
}
</script>

<style lang="less" scoped>

  .messagebox{
    width:95% ;
    margin-left: 2.5%;
    // margin-top: %;
  }
  .el-form-item{
    width: 21%;
    margin: 0px 2%;
  }
  .el-form-item:nth-child(9){
    width: 46%;
  }
  .el-form-item:nth-child(10){
    width: 46%;
  }

    .messagebox .el-form{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
</style>